<template>
  <!-- 大盒子 -->
  <div class="MedicenCata">
    <!-- 主体内容 -->
    <div class="main">
      <!-- left -->
      <!-- right -->
      <div class="main-right" ref="mainRight">
<!--        <el-dropdown-item command="a">可用</el-dropdown-item>
        <el-dropdown-item command="b">禁用</el-dropdown-item>
        <el-dropdown-item command="c" divided>全部</el-dropdown-item>-->
        <!-- tit -->
        <div class="main-icon"
             style="display: flex; align-items: center; padding: 8px 10px; background: #fff; border-bottom: 1px solid #ebeef5;">
          <!-- 左侧图标和标题 -->
          <div class="main-icon-a" style="display: flex; align-items: center; margin-right: 15px;">
            <i :class="iconComes"
               style="border-radius: 50%; font-size: 20px; padding: 6px; background-color: #5a5a5a; color: #fff;"></i>
            <span style="font-size: 12px; font-weight: bold; margin-left: 8px; color: #606266;">{{
                CatalogueName
              }}</span>
          </div>

          <!-- 中间区域（所有筛选条件和按钮都在一行） -->
          <div style="display: flex; align-items: center; flex-wrap: nowrap;">
            <!-- 状态下拉 -->
            <div class="main-icon-b" style="margin-right: 20px;">
              <span style="font-size: 12px; color: #606266; font-weight: bold;">状态:</span>
              <el-dropdown @command="handleCommand" trigger="click" style="margin-left: 4px;">
                <span class="el-dropdown-link">{{ DropDownedName }}<i class="el-icon-down"></i></span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="c" dropdown>全部</el-dropdown-item>
                  <el-dropdown-item command="a">可用</el-dropdown-item>
                  <el-dropdown-item command="b">禁用</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>

            <!-- 搜索框 -->
            <div style="display: flex; align-items: center; margin-right: 20px; white-space: nowrap;">
              <span style="font-size: 12px; color: #606266; font-weight: bold; margin-right: 8px;">关键字:</span>
              <el-input v-model="queryConditionForm.name" size="mini" style="width: 180px;" @keyup.enter.native="loadData"></el-input>
            </div>

            <div class="block">
              <el-date-picker
                  size="mini"
                  v-model="queryConditionForm.timeFrameArr"
                  type="datetimerange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="handleConditionQuery"
                  :picker-options="pickerOptions">
              </el-date-picker>
            </div>

            <!-- 按钮组（直接跟在时间选择器后面） -->
            <div style="display: flex; align-items: center;">
              <el-button
                  v-for="(v,i) in headerBtn"
                  :key="i"
                  :type="v.type"
                  :loading="loading"
                  :icon="v.icon"
                  size="mini"
                  :style="{...v.style, 'margin-left': '6px'}"
                  @click="handClick(i)">
                {{ v.title }}
              </el-button>
            </div>
          </div>
        </div>

        <div class="table">
          <el-table :data="tableData" border @row-dblclick="handleDbShowData">
            <el-table-column v-for="(col, inx) in tableRows" :key="inx" :type="col.type" :prop="col.prop"
                             :label="col.name" :render-header="labelHead"
                             :width="col.prop === 'cotUnit' ? '300px' : getColumnWidth(col.label,col.prop,tableData)"
                             header-align="center">
              <template #default="{ row }">
                <!-- 特殊处理状态列（假设prop为'state'） -->
                <template v-if="col.prop === 'state'">
                  <el-tag :type="row.state === 1 ? 'success' : 'danger'"
                          size="small"
                          effect="light"
                          :class="'status-tag status-tag-' + row.state">
                    <i :class="row.state === 1 ? 'el-icon-success' : 'el-icon-error'"></i>
                    {{ row.state === 1 ? '启用' : '禁用' }}
                  </el-tag>
                </template>
                <!-- 其他列保持原样 -->
                <template v-else>
                  {{ safeGetMappedValue(col, row) }}
                </template>
              </template>
            </el-table-column>
            <!-- fixed -->
            <el-table-column fixed="left" label="行号" type="index"></el-table-column>
            <el-table-column fixed="right" label="操作" width="148">
              <template #default="scope">
                <div class="editbox" style="text-align: center;">
                  <el-button type="primary" @click="handleEditOnCredit(scope.row)" size="mini">编辑</el-button>
                  <el-button
                      :type="scope.row.state === 1 ? 'danger' : 'success'"
                      @click="handleStartOrDisabled(scope.row)"
                      size="mini"
                  >
                    {{ scope.row.state === 1 ? '禁用' : '启用' }}
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <el-dialog
            :title='addOnCreditForm.id == null ? "新增挂账类型" : "修改挂账类型" || showOnCreditDialogVisible ? "查看挂账类型":null '
            :visible.sync="addOnCreditDialogVisible"
            :close-on-click-modal="false"
            width="700px"
            @close="handleCloseAddOnCredit"
            class="custom-form-dialog"
        >
          <el-form
              size="mini"
              :model="addOnCreditForm"
              ref="addOnCreditForm"
              :rules="addOnCreditFormRules"
              label-width="110px"
              label-position="right"
              :disabled="showOnCreditDialogVisible"
          >
            <!-- 第一行：编码 + 合约单位 -->
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="编码：" prop="code">
                  <el-input
                      v-model="addOnCreditForm.code"
                      placeholder="如：HT20230001"
                      clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="合约单位：" prop="cotUnit">
                  <el-select
                      v-model="addOnCreditForm.cotUnit"
                      placeholder="请选择"
                      style="width: 100%"
                      clearable
                  >
                    <el-option
                        v-for="item in contractUnitOption"
                        :key="item.id"
                        :label="item.label"
                        :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第二行：名称 + 状态 -->
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="名称：" prop="name">
                  <el-input
                      v-model="addOnCreditForm.name"
                      @input="handleOnCreditNameGetPy"
                      placeholder="请输入完整名称"
                      clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="状态：" prop="state">
                  <el-select
                      v-model="addOnCreditForm.state"
                      placeholder="请选择状态"
                      style="width: 100%"
                  >
                    <el-option
                        v-for="item in stateOption"
                        :key="item.id"
                        :label="item.label"
                        :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 第三行：开始时间 + 结束时间 -->
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="开始时间：" prop="beginTime">
                  <el-date-picker
                      v-model="addOnCreditForm.beginTime"
                      type="datetime"
                      placeholder="选择开始时间"
                      style="width: 100%"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      :default-time="'00:00:00'"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="结束时间：" prop="endTime">
                  <el-date-picker
                      v-model="addOnCreditForm.endTime"
                      type="datetime"
                      placeholder="选择结束时间"
                      style="width: 100%"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      :default-time="'23:59:59'"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 拼音简码（单独一行） -->
            <el-form-item label="拼音简码：">
              <el-input
                  v-model="addOnCreditForm.pycode"
                  placeholder="自动生成"
                  disabled
                  class="disabled-input"
              />
            </el-form-item>


            <!-- 备注（文本域） -->
            <el-form-item label="备注：">
              <el-input
                  type="textarea"
                  v-model="addOnCreditForm.remarks"
                  :rows="3"
                  placeholder="可输入额外说明信息"
                  resize="none"
                  show-word-limit
                  maxlength="200"
              />
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button :disabled="showOnCreditDialogVisible" size="mini" type="primary" @click="handleAddOnCredit">保存</el-button>
            <el-button :disabled="showOnCreditDialogVisible" size="mini" @click="handleCloseAddOnCredit">取消</el-button>
          </div>
        </el-dialog>

      </div>
    </div>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[8, 16, 24]"
        :page-size="pageSize"
        :total="totalSize"
        layout="total, sizes, prev, pager, next, jumper"
        background
    >
    </el-pagination>
  </div>
</template>

<script>
import {getContractDeptList} from "@/api/contractDept/contractDept";
import {costnametablePage} from "@/api/Outpatient/chargingPrice";
import {pinyin} from "pinyin-pro";
import {addContractUnit, editContractUnit, getContuntList, getDeptList} from "@/api/reservation/reservation";
import {
  getBeforeHistoryTemplate,
  getComplaintemplate, getNowHistoryTemplate,
} from "@/api/reservation/caseHistoryTemplate";
import {getDoctorList} from "@/api/scheduling/scheduling";
import {getOnCredit} from "@/api/reservation/onCredit";
import {addOnCredit, editOnCredit} from "@/api/reservation/outpatientCharge";
import {getPayOrder} from "@/api/payOrder/payOrder";
import dayjs from "dayjs";
import {getAllReservation} from "@/api/reservation/reservationList";
import {withLoading} from "@/untils/loading";

export default {
  inject: ['reload'], // 无痕刷新
  components: {},
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      // 树菜单Props
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // str
      windowWidth: '', //右侧表格动态宽度
      searchValue: '',
      CatalogueName: '挂账类型',
      DropDownedName: '全部',
      state: null,
      iconComes: 'el-icon-byj',
      queryConditionForm: {
        name: '',
        timeFrameArr: [
          dayjs().startOf('year').format('YYYY-MM-DD HH:mm:ss'),
          dayjs().endOf('year').format('YYYY-MM-DD HH:mm:ss')
        ],
      },

      //模态框控制
      loading: false,
      addOnCreditDialogVisible: false,
      showOnCreditDialogVisible: false,

      //分页参数
      pageNum: 1,
      pageSize: 8,
      totalSize: 10,

      //下拉框
      contractUnitOption: [],//合约单位
      stateOption: [{id: 0, label: '禁用'}, {id: 1, label: '可用'}],
      doctorOptions: [],

      //表单验证
      addOnCreditFormRules: {
        code: [
          {required: true, message: '请输入编码', trigger: 'blur'},
          {min: 2, max: 20, message: '长度在2到20个字符', trigger: 'blur'}
        ],
        cotUnit: [
          {required: true, message: '请选择合约单位', trigger: 'change'}
        ],
        name: [
          {required: true, message: '请输入名称', trigger: 'blur'},
          {min: 2, max: 50, message: '长度在2到50个字符', trigger: 'blur'}
        ],

        beginTime: [
          {required: true, message: '请选择开始时间', trigger: 'change'}
        ],
        endTime: [
          {required: true, message: '请选择结束时间', trigger: 'change'},
          {
            validator: (rule, value, callback) => {
              if (this.addOnCreditForm.beginTime && value) {
                if (new Date(value) < new Date(this.addOnCreditForm.beginTime)) {
                  callback(new Error('结束时间不能早于开始时间'));
                } else {
                  callback();
                }
              } else {
                callback();
              }
            },
            trigger: 'change'
          }
        ]
      },

      //表单容器
      addOnCreditForm: {
        beginTime: '',
        code: '',
        cotUnit: null,
        endTime: '',
        name: '',
        pycode: '',
        remarks: '',
        state: 1,
      },

      //表格容器
      tableData: [],

      //动态按钮
      headerBtn: [
        {search: "search", title: "搜索", type: "success", style: {marginLeft: "-20px"}},
        {add: "add", title: "新增", type: "warning"},
      ],
      //侧边树
      elTree: [
        {label: '全部', path: '', title: '', icon: 'el-icon-news', children: [],},
      ],

      //动态列容器
      tableRows: [
        {name: "系统序号", prop: "id", type: ""}, {name: "名称", prop: "name", type: ""},
        {name: "有效状态", prop: "state", type: "", op: 'stateOption'},
        {name: "编码", prop: "code", type: ""},
         {
          name: "合约单位",
          prop: "cotUnit",
          op: 'contractUnitOption'
        },
        /*{name: "操作人", prop: "createId", type: "", op: 'doctorOptions'}, */
        {
          name: "操作时间",
          prop: "createTime",
          type: ""
        },
        {name: "开始时间", prop: "beginTime", type: ""},
        {name: "结束时间", prop: "endTime", nz: "nz"}, {name: "备注", prop: "remarks", type: ""},
      ],


      areaOption: [{id: 1, label: '省内'}, {id: 2, label: '省外'}, {id: 3, label: '进口'}],


    };
  },
  mounted() {
    this.loadData();
    this.getDoctorList();
    this.$nextTick(() => {
      this.updateWindowWidth();
      window.addEventListener('resize', this.updateWindowWidth);
    })
  },
  methods: {
    async handleConditionQuery() {
      try {
        const res = await getOnCredit({
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          name: this.queryConditionForm.name || '',  // name为空时传空字符串
          startTime: this.queryConditionForm.timeFrameArr?.[0] || '',  // 使用可选链更安全
          endTime: this.queryConditionForm.timeFrameArr?.[1] || '',    // 使用可选链更安全
          state: this.state ?? null  // 使用空值合并运算符
        });
        if (res.code === 200) {
          this.totalSize = res.data.totalSize;
          this.tableData = res.data.content.map(item => {
            return {
              ...item,
              createTime: item.createTime ? dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') : '',
              endTime: item.endTime ? dayjs(item.endTime).format('YYYY-MM-DD HH:mm:ss') : '',
              beginTime: item.beginTime ? dayjs(item.beginTime).format('YYYY-MM-DD HH:mm:ss') : ''
            }
          })
          await this.getContuntList();
        } else {
          this.$message.error("系统异常:请联系管理员")
        }
      } catch (error) {
        this.$message.error("系统异常:请联系管理员")
      } finally {

      }
    },

    //修改
    async handleEditOnCredit(row) {
      this.addOnCreditForm = {...row};
      await this.getContuntList();
      this.addOnCreditDialogVisible = true;
    },

    //新增修改
    async handleAddOnCredit() {
        const valid = await this.$refs.addOnCreditForm.validate();
        if (!valid) {
          this.$message.warning('请完善表单信息');
          return false;
        }
        await withLoading(this, '数据提交中...')(async () => {
          let res;
          if (this.addOnCreditForm.id) {
            res = await editOnCredit(this.addOnCreditForm);
          } else {
            res = await addOnCredit(this.addOnCreditForm);
          }
          if (res.code === 200) {
            this.handleCloseAddOnCredit();
            await this.loadData();
          } else {
            this.$message.error(res.message || '操作失败');
          }
        });
    },

    //合约单位下拉框
    async getContuntList() {
      if (this.contractUnitOption.length > 0) return;
      const res = await getContuntList();
      this.contractUnitOption = res.data.map(item => {
        return {id: item.id, label: item.name}
      })
    },

    //关闭模态框清空数据
    handleCloseAddOnCredit() {
      this.addOnCreditForm = {};
      this.addOnCreditForm.state = 1;
      this.$nextTick(() => {
        this.$refs.addOnCreditForm.clearValidate();
      });
      this.addOnCreditDialogVisible = false;
      this.showOnCreditDialogVisible = false;
    },

    //转拼音
    handleOnCreditNameGetPy() {
      this.addOnCreditForm.pycode =
          pinyin(this.addOnCreditForm.name, {pattern: 'first', toneType: 'none', separator: ''}).toLocaleUpperCase();
    },

    //科室下拉框
    async getDeptList() {
      const res = await getDeptList()
      this.deptOptions = res.data.map(item => {
        return {id: item.id, label: item.deptName}
      })
    },

    //医生下拉框
    async getDoctorList() {
      const res = await getDoctorList()
      this.doctorOptions = res.data.map(item => {
        return {id: item.id, label: item.fullName}
      })
    },

    //启用禁用
    async handleStartOrDisabled(row) {
      try {
        // 确认弹框
        const confirmMessage = row.state === 1 ? `确定要禁用${row.name}吗？` : `确定要启用${row.name}吗？`;
        const confirmResult = await this.$confirm(confirmMessage, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(() => {
          return false;
        });

        // 如果用户点击取消，直接返回
        if (!confirmResult) return;

        // 执行状态修改
        this.addOnCreditForm = row;
        this.addOnCreditForm.state = row.state === 1 ? 0 : 1;
        const res = await editOnCredit(this.addOnCreditForm);
        if (res.code === 200) {
          await this.loadData();
        } else {
          this.$message.error(`修改${this.addOnCreditForm.name}状态失败`);
        }
      } catch (error) {
        console.error('操作失败:', error);
        this.$message.error('操作过程中发生错误');
      }
    },

    //双击查看的当前行信息
    handleDbShowData(row) {
      this.addOnCreditForm = row;
      this.addOnCreditDialogVisible = true;
      this.showOnCreditDialogVisible = true;
    },

    //表格字段映射
    safeGetMappedValue(col, row) {
      // 1. 检查数据有效性
      const rawValue = row[col.prop];
      if (rawValue === null || rawValue === undefined) return ' ';

      // 2. 检查映射数组
      const mapArray = this[col.op];
      if (!col.op || !Array.isArray(mapArray)) return rawValue;

      // 3. 执行映射
      const matched = mapArray.find(item => item.id === rawValue);
      return matched?.label || rawValue;
    },

    //数据源
    async loadData() {
      try {
        const res = await getOnCredit({
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          name: this.queryConditionForm.name || '',  // name为空时传空字符串
          startTime: this.queryConditionForm.timeFrameArr?.[0] || '',  // 使用可选链更安全
          endTime: this.queryConditionForm.timeFrameArr?.[1] || '',    // 使用可选链更安全
          state: this.state ?? null  // 使用空值合并运算符
        });
        if (res.code === 200) {
          this.totalSize = res.data.totalSize;
          this.tableData = res.data.content.map(item => {
            return {
              ...item,
              createTime: item.createTime ? dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') : '',
              endTime: item.endTime ? dayjs(item.endTime).format('YYYY-MM-DD HH:mm:ss') : '',
              beginTime: item.beginTime ? dayjs(item.beginTime).format('YYYY-MM-DD HH:mm:ss') : ''
            }
          })
          await this.getContuntList();
        } else {
          this.$message.error("系统异常:请联系管理员")
        }
      } catch (error) {
        this.$message.error("系统异常:请联系管理员")
      } finally {

      }
    },

    //侧边树(全部)按钮
    handleNodeClick(data, e) {
      this.searchValue = '';
      this.loadData()
    },

    //动态计算列宽
    columnWidth(col, list) {
      let prop = col.prop, lab = col.lab;
      let width = 40; // 设定一个最小值
      let maxlenStr = ""; // 最长字符串
      for (let info of list) {
        if (maxlenStr < (info[prop] + "").length) maxlenStr = info[prop];
      }
      width = Math.max(width, len(lab), len(maxlenStr));
      // 表格自带的内边距(20px) 自调
      return width + 12; // 这里加了 12px
      function len(str) {
        // 实际分配长度可根据需要自行调整
        let length = 8;
        for (const char of str + "") {
          // 英文小写字符 8px
          if ("a" <= char && char <= "z") length += 8;
          // 英文大写字符 8px
          else if ("A" <= char && char <= "Z") length += 8;
          // 中文字符 28px
          else if (char >= "\u4e00" && char <= "\u9fa5") length += 32;
          // 其他 8px
          else length += 12;
        }
        return length;
      }
    },

    // 步骤
    async handClick(i) {
      switch (i) {
        case 0:
         await this.loadData()
          break;
        case 1:
          await this.getContuntList();
          this.addOnCreditDialogVisible = true;
          break;
      }
    },

    //状态查询
    async handleCommand(command) {
      this.state = command === 'a' ? 1 : command === 'b' ? 0 : null;
      await this.loadData();
      this.DropDownedName = this.state === 1 ? '可用' : this.state === 0 ? '禁用' : '全部';
    },

    // 实时宽度
    updateWindowWidth() {
      this.windowWidth = window.innerWidth - 328;
    },

    //分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.loadData();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.loadData();
    },
    getColumnWidth(label, prop, tableData) {
      const minWidth = 80;
      const padding = 20; // 增加边距缓冲
      const contentList = tableData.map(item => item?.[prop] ?? '');

      // 计算所有内容宽度（包括表头）
      const widths = [...contentList, label].map(text => {
        const str = String(text || '');
        return this.getTextWidth(str) + padding;
      });

      return Math.max(minWidth, ...widths);
    },

    // 精确计算文本宽度（使用Canvas）
    getTextWidth(text, fontSize = 14) {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      ctx.font = `${fontSize}px Microsoft YaHei`;
      return ctx.measureText(text).width;
    },

    labelHead(h, { column, $index }) {
      let l = column.label.length;
      let f = 12;
      column.minWidth = f * (l + 5); //加上一个文字长度
      return h("div", { class: "table-head", style: { width: "100%" } }, [
        column.label,
      ]);
    },
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-dialog__header {
  padding: 18px;
  background-color: #007bb0;
}

/deep/ .el-dialog__title {
  font-size: 18px;
  color: #fff;
}

/deep/ .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

.dialog {
  .showDialog {
    .tabs {
      /deep/ .el-select > .el-input {
        width: 172px;
      }

      /deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: 172px;
      }

      /deep/ .el-form-item__content {
        display: flex;

        span {
          font-size: 12px;
        }
      }

      .oneLine {
        width: 524px;
        // background-color: indianred;
      }
    }

    /deep/ .el-dialog__title {
      font-size: 15px;
    }

    /deep/ .el-table {
      font-size: 15px;
    }
  }
}


// content
.MedicenCata {
  height: 100%;
  width: 100%;
  // header
  .header {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 40px;
    background-color: #efefef;
    padding: 4px;

    // justify-content: space-evenly;
    // icon
    .header-icon {
      display: flex;
      align-items: center;
    }

    .feetbtn {
      display: flex;
      justify-content: center;
      margin-left: 12px;
    }
  }

  // main
  .main {
    width: 100%;
    display: flex;
    justify-content: space-between;
    // height: 473px; /* 设置父容器的高度 */
    // overflow-y: auto; /* 当内容超出容器高度时显示垂直滚动条 */
    // left

    // right
    .main-right {
      flex: 1;
      width: 100%;
      height: 100%;
      // alert
      .addmessagesBox {
        .tabs {
          /deep/ .el-select > .el-input {
            width: 172px;
          }

          /deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner {
            width: 172px;
          }

          /deep/ .el-form-item__content {
            display: flex;

            span {
              font-size: 12px;
            }
          }

          .oneLine {
            width: 524px;
            // background-color: indianred;
          }
        }

        /deep/ .el-dialog__title {
          font-size: 12px;
        }

        /deep/ .el-table {
          font-size: 12px;
        }

      }

      // icon
      .main-icon {
        display: flex;
        align-items: center;
        padding: 12px;
        line-height: 40px;

        .main-icon-a {
          // width: 240px;
          // background-color: #00557f;
        }

        .main-icon-b {
          margin-left: 20px;

          /deep/ .el-dropdown {
            font-size: 12px;
            cursor: pointer;
          }

          /deep/ .el-dropdown:hover {
            font-weight: bold;
            color: #66b1ff;
          }

          /deep/ .el-icon--right {
            // background-color: #66b1ff;
          }

          /deep/ .el-popper[x-placement^=bottom] {
            margin-top: 0;
          }
        }

        // c
        .main-icon-c {
          display: flex;
          margin-left: 28px;

          /deep/ [data-v-2bacc09b] .el-color-picker__icon, .el-input[data-v-2bacc09b], .el-textarea[data-v-2bacc09b] {
            width: 80%;
          }
        }
      }

      // table
      /deep/ .el-table .cell {
        font-size: 12px;
        text-align: center;
      }

      /deep/ .el-table td.el-table__cell div :first-child {
        text-align: center;
      }

      /deep/ .el-table td.el-table__cell div {
        text-align: center;
        overflow: hidden;
        white-space: normal;
        word-break: break-all;
      }

      .table {

      }
    }
  }

  // addModel
  .addModel {
    margin-left: 12px;

    /deep/ .el-dialog__header {
      padding: 12px;
      line-height: 28px;
      background-color: #007bb0;
    }

    /deep/ .el-dialog__title {
      color: #fff;
      font-size: 12px;
    }

    /deep/ .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
    }

    /deep/ .el-dialog__headerbtn .el-dialog__close:hover {
      background-color: brown;
    }

    /deep/ .el-form-item__label {
      font-size: 12px;
    }
  }

  .editModel {
    /deep/ .el-dialog__header {
      padding: 12px;
      line-height: 28px;
      background-color: #007bb0;
    }

    /deep/ .el-dialog__title {
      color: #fff;
      font-size: 12px;
    }

    /deep/ .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
    }

    /deep/ .el-dialog__headerbtn .el-dialog__close:hover {
      background-color: brown;
    }

    /deep/ .el-form-item__label {
      font-size: 12px;
    }
  }

  // feet
  .feet {
    padding: 12px;

  }

}
</style>